<template>
  <div class="backround">
    <!-- 上半部分表格 -->
    <el-table
      :data="listData"
      border
      class="top"
      :header-cell-style="{background:'#eee',color:'#000000'}">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        min-width="40px"
        :fixed="item.fixed === 'left' ? item.fixed : undefined"
        show-overflow-tooltip
        align="center"
      />
    </el-table>
    <!-- 下半部分表格 -->
    <vue-seamless-scroll
      :data="listData"
      class="seamless-warp"
      :class-option="optionHover">
      <el-table :data="listData"
                class="bottom"
                border
                :header-cell-style="{background:'#eee',color:'#000000'}"
                style="width: 100%"
      >
        <el-table-column
          flex
          min-width="40px"
          v-for="(item,index) in columns"
          :key="index+'i'"
          :laber="item.label"
          :prop="item.prop"
          :show-overflow-tooltip="true"
          align="center"
        />
      </el-table>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: 'TableData',
  components: {
    vueSeamlessScroll // 注册组件
  },
  data() {
    return {
      status: false,
      listData: [
        // 单位 公用与民用建筑 装备制造 房屋建筑
        // 其他领域 工程管理 电子电气 绿色矿山
        // 公路与市政 水电水利 水资源与环境
        // 土木工程 轨道交通
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
        {
          dw: '123333',
          gyMyjz: 90,
          zbZz: 4,
          fwJz: 0,
          qtLy: 23,
          gcGl: 14,
          dzDq: 2,
          lsKs: 0,
          glSz: 29,
          sdSl: 29,
          szyHj: 29,
          tmGc: 29,
          gdJt: 29,
        },
      ],
      columns: [
        {prop: 'dw', label: '单位', fixed: 'left'},
        {prop: 'gyMyjz', label: '公用与民用建筑', fixed: 'left'},
        {prop: 'zbZz', label: '装备制造', fixed: 'left'},
        {prop: 'fwJz', label: '房屋建筑', fixed: 'left'},
        {prop: 'qtLy', label: '其他领域', fixed: 'left'},
        {prop: 'gcGl', label: '工程管理', fixed: 'left'},
        {prop: 'dzDq', label: '电子电气', fixed: 'left'},
        {prop: 'lsKs', label: '绿色矿山', fixed: 'left'},
        {prop: 'glSz', label: '公路与市政', fixed: 'left'},
        {prop: 'sdSl', label: '水电水利', fixed: 'left'},
        {prop: 'szyHj', label: '水资源与环境', fixed: 'left'},
        {prop: 'tmGc', label: '土木工程', fixed: 'left'},
        {prop: 'gdJt', label: '轨道交通', fixed: 'left'},

      ],
    };
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  list-style: none;
}

ul, li, ol {
  padding: 0;
}

::v-deep .table-style {
  .el-table__header-wrapper {
    display: none;
  }
}

.seamless-warp {
  height: 700px;
  overflow: hidden;
}

.el-table .cell {
  text-align: center;
}

/* 隐藏顶部表格的数据部分 */
::v-deep .top {
  .el-table__body-wrapper {
    display: none;
  }
}

/* 隐藏底部表格的表头部分 */
::v-deep .bottom {
  .el-table__header-wrapper {
    display: none;
  }
}
</style>
